<div class="home">
    <!-- 自定义轮播图组件（包装） -->
    <app-wy-carousel #wyCarousel [activeIndex]="carouselIndex" (changeSlide)="onChangeSlide($event)">
        <!-- zorro-antd组件 -->
        <nz-carousel nzAutoPlay nzEffect="fade" [nzDotRender]="wyCarousel.dotRef" (nzBeforeChange)="onBeforeChange($event)">
            <div nz-carousel-content class="carousel-item" *ngFor="let item of banners">
                <a target="_blank" class="banner-item" [href]="item.url">
                    <img [src]="item.imageUrl">
                </a>
            </div>
        </nz-carousel>
    </app-wy-carousel>
    <!-- 主体部分 -->
    <div class="main">
        <div class="wrap">
            <!-- 主体左侧 -->
            <div class="left">
                <div class="sec">
                    <div class="up">
                        <div class="navs">
                            <h2>
                                <i></i>
                                <a>热门推荐</a>
                            </h2>
                            <nav>
                                <a *ngFor="let item of hotTags" routerLink="/sheet" [queryParams]="{cat: item.name}">{{item.name}}</a>
                            </nav>
                        </div>
                        <a routerLink="/sheet" class="more"> 更多
                            <i nz-icon [nzIconfont]="'icon-jiantou_xiangyou'"></i>
                        </a>
                    </div>
                    <div class="down">
                        <!-- 单个歌单组件 -->
                        <div class="down-wrap">
                            <app-single-sheet *ngFor="let sheet of songSheetList" (onPlay)="onPalySheet($event)" [singleSheet]='sheet'>
                            </app-single-sheet>
                        </div>
                    </div>
                </div>
            </div>
            <div class="right">
                <!-- 会员登陆 -->
                <app-member-card></app-member-card>

                <div class="singer-box">
                    <div class="head">
                        <span class="title">入驻歌手</span>
                        <a href="" class="all">查看全部 ></a>
                    </div>
                    <!-- 歌手列表 -->
                    <ul class="singers">
                        <li class="singer-item" *ngFor="let singer of artists;let id = index" [id]="id">
                            <a href="" class="link">
                                <img class="singer-img" [src]="singer.picUrl" alt="">
                                <div class="info">
                                    <div class="title">{{singer.name}}</div>
                                    <div class="dec" nz-typography nzEllipsis>专辑数量：{{singer.albumSize}}</div>
                                </div>
                            </a>
                        </li>
                    </ul>
                    <div class="apply">
                        <a href="">申请成为网易音乐人</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>